<template>
  <view class="container">
    <div style="padding: 20rpx; background-color: white">
      <u-search
        placeholder="搜索机构"
        v-model="keyword"
        @search="searchFn"
      ></u-search>
    </div>

    <div style="padding: 20rpx">
      <div class="jigou_box" v-for="(item, index) in list" :key="index">
        <div class="title">{{ item.label }}</div>
        <view
          class="jigou_switch"
          v-if="!item.checked"
          @click="switchJiGou(item)"
        >
          切换
        </view>
        <view class="jigou_switch_check" v-else> 当前 </view>
      </div>
    </div>
  </view>
</template>

<script>
import { getHospital } from "@/api/index.js";
import navbarMixin from "@/common/mixin/navbar.js";
export default {
  mixins: [navbarMixin],

  data() {
    return {
      content: "",
      keyword: "",
      // 列表
      list: [],
      // 当前选中的医院
      curHospital: -999,
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    // 获取本地缓存起来的数据
    this.curHospital = uni.getStorageSync("curHospital") || "";
    // 获取页面数据
    try {
      await this.getPageData();
    } catch (error) {}
  },

  methods: {
    async getPageData(keyword) {
      const _res = await getHospital({
        page: 1,
        limit: 100,
        keyword: keyword || "",
      });

      _res?.list?.forEach((item) => {
        this.list.push({
          ...item,
          label: item.name,
          checked: item.id == this.curHospital,
        });
      });
    },
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    switchJiGou(_data) {
      this.list.forEach((item) => {
        item.checked = item.id === _data.id;
      });
      this.curHospital = _data.id;

      // 缓存到本地
      uni.setStorageSync("curHospital", _data.id);
      uni.setStorageSync("curHospitalName", _data.name);
    },
    async searchFn(keyword) {
      this.list = [];
      await this.getPageData(keyword);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #ebebeb;
}

.custom_btn {
  width: 100rpx;
  height: 50rpx;
  border-radius: 4rpx;
  background-color: rgba(78, 147, 221, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 26rpx;
  text-align: center;
  font-family: PingFangSC-regular;
}

.jigou_box {
  // width: 760rpx;
  height: 88rpx;
  line-height: 40rpx;
  border-radius: 24rpx;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 28rpx;
  text-align: center;
  font-family: PingFangSC-regular;

  padding: 20rpx 40rpx;
  display: flex;
  justify-content: space-between;

  margin-bottom: 15rpx;

  .title {
    line-height: 46rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 32rpx;
    text-align: left;
    font-family: PingFangSC-regular;
  }

  .jigou_switch {
    width: 122rpx;
    border-radius: 8rpx;
    background-color: rgba(78, 147, 221, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 26rpx;
    font-family: PingFangSC-regular;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .jigou_switch_check {
    width: 122rpx;
    line-height: 38rpx;
    border-radius: 8rpx;
    background-color: rgba(81, 224, 14, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 26rpx;
    text-align: center;
    font-family: PingFangSC-regular;
  }
}
</style>
